<template>
  <div>
    <a-drawer :visible="visible" height="100%" placement="top" @close="onClose"
      :bodyStyle="{height:'100%'}">
      <div class="cate-container">
        <div class="cate-wrap">
          <span class="cate-item trigger" v-for="item in cateList"
            :style="{color:item.color,fontSize:getfontSize(item.level)}" @click="toPage(item.id)">
            {{item.title}}
          </span>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { computed, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import store from "@/store";
export default {
  props: { visible: Boolean },
  setup(props, { emit }) {
    const router = useRouter();
    const cateList = computed(() => store.state.cateList);
    const { visible } = toRefs(props);
    const onClose = () => {
      emit("close", false);
    };
    const getfontSize = (l) => {
      if (l == 0) return "2rem";
      else if (l == 1) return "3rem";
      else if (l == 2) return "3rem";
      else if (l == 3) return "4rem";
      else if (l == 4) return "5rem";
    };
    const toPage = (id) => {
      onClose();
      router.push({ path: `/home`, query: { category: id } });
    };

    return { visible, cateList, getfontSize, onClose, toPage };
  },
};
</script>

<style scoped lang="less">
.cate-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.cate-wrap {
  width: 500px;
  margin: 0 auto;
  line-height: 40px;
  text-align: justify;
  .cate-item {
    font-size: 2rem;
    margin: 12px;
    white-space: nowrap;
  }
}
</style>